<template>
    <view>
        <!-- 导航栏 -->
        <navigationBar :bgType="3" navigationTitle="商城" />
        <view
            class="wrap tabBar-height"
            :style="'padding-top:calc(' + navigationHeight + 'px + 45px);'"
        >
            <image
                class="wrap-bg"
                :src="imageURL + 'common/top_bg.png'"
                mode="widthFix"
            ></image>
            <!-- 搜索 -->
            <view class="shopping_search flex align-center" @click="tieo">
                <u-icon name="search" color="#999"></u-icon>
                <input
                    class="search_input f-26"
                    type="text"
                    placeholder="臻享商品任意挑选"
                    disabled="true"
                />
                <view class="search_btn f-26">搜索</view>
            </view>
            <!-- 轮播图 -->
            <view class="shopping_banner">
                <swiper
                    :circular="true"
                    :autoplay="true"
                    :interval="3000"
                    :duration="1000"
                    :indicator-dots="true"
                    indicator-color="rgba(255, 255, 255, 0.3)"
                    indicator-active-color="#FFF"
                >
                    <block v-for="(item, index) in bannerList" :key="item.id">
                        <swiper-item>
                            <image
                                class="shopping_banner_img"
                                :src="BaseUrl + item.media"
                                @click="bannerTab(item.url)"
                            ></image>
                        </swiper-item>
                    </block>
                </swiper>
            </view>

            <view class="shopping_nav flex">
                <scroll-view scroll-x="true" class="foods_scroll_all flex">
                    <block v-for="(item, index) in nav_list" :key="index">
                        <view
                            class=""
                            style="display: inline-block; margin: 5rpx 10rpx"
                            @click="tiaoMore(item.id)"
                        >
                            <view class="shopping_nav_item">
                                <view class="shopping_nav_item_name">{{
                                    item.name
                                }}</view>
                                <image
                                    class="shopping_nav_item_img"
                                    :src="item.image"
                                >
                                </image>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>
            <!-- 限时秒杀 -->
            <view
                class="activity-title flex align-center"
                :style="
                    'background-image: url(' + imageURL + 'shopping/msbg.png);'
                "
            >
                <view
                    class="ms_title"
                    :style="
                        'background-image: url(' +
                        imageURL +
                        'shopping/ms.png);'
                    "
                >
                </view>
                <view class="flex ms_xinxi">
                    <view class="title fb-30">倒计时</view>
                    <view class="activity-time flex align-center">
                        <view class="time f-20">{{ hour }}</view>
                        <view class="colon f-26">:</view>
                        <view class="time f-20">{{ min }}</view>
                        <view class="colon f-26">:</view>
                        <view class="time f-20">{{ second }}</view>
                    </view>
                    <view class="title fb-30">结束</view>
                </view>
            </view>
            <view class="shopping_banner2">
                <swiper
                    :circular="true"
                    :autoplay="true"
                    :interval="7000"
                    :duration="1000"
                    :indicator-dots="true"
                    indicator-color="rgba(255, 255, 255, 0.3)"
                    indicator-active-color="#FFF"
                >
                    <block
                        v-for="(item, index) in goodsMiaoshaList"
                        :key="index"
                    >
                        <swiper-item>
                            <view class="flash_sale">
                                <view class="activity-item">
                                    <view class="goods-item">
                                        <image
                                            class="goods-img"
                                            :src="BaseUrl + item.image"
                                        ></image>
                                        <view class="flex column">
                                            <view
                                                class="goods_title line-clamp-2"
                                            >
                                                {{ item.title }}
                                            </view>
                                            <view class="goods-price">
                                                <text>抢购价</text>
                                                <text
                                                    class="fb-22"
                                                    style="margin-right: 6rpx"
                                                    >¥</text
                                                >
                                                <text class="jiage">{{
                                                    item.price
                                                }}</text>
                                            </view>
                                            <view class="buy">
                                                <view class="guang">
                                                    库存有限先到先得
                                                </view>
                                                <button
                                                    class="btn"
                                                    @click="buyFlash()"
                                                >
                                                    立即抢购
                                                </button>
                                            </view>
                                        </view>
                                    </view>
                                    <view
                                        class="admin"
                                        v-for="(user, index) in item.userlist"
                                        :key="index"
                                    >
                                        <view class="admin_xinxi">
                                            <image
                                                class="admin_img"
                                                :src="BaseUrl + user.avatar"
                                                mode=""
                                            >
                                            </image>
                                            <view
                                                class="admin_phone"
                                                :key="index"
                                            >
                                                {{ user.nickname }}
                                            </view>
                                        </view>
                                        <view class="" style="width: 100rpx">
                                            {{ index + 1 }}/{{ total }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </swiper-item>
                    </block>
                </swiper>
            </view>

            <!-- 甄选好物 -->
            <view class="select_goods">
                <view class="select_goods_title">
                    <view
                        class=""
                        style="
                            width: 10rpx;
                            height: 36rpx;
                            background: linear-gradient(
                                90deg,
                                #00a67a,
                                #057748
                            );
                            border-radius: 0rpx 6rpx 6rpx 0rpx;
                        "
                    >
                    </view>
                    <view class="select_goods_title_tit"> 甄选好物 </view>
                    <view
                        class="select_goods_title_more"
                        @click="zhenxuanMore()"
                    >
                        <text class="select_goods_title_text">更多</text>
                        <image
                            style="
                                width: 30rpx;
                                height: 30rpx;
                                line-height: 30rpx;
                            "
                            :src="imageURL + 'shopping/more.png'"
                        >
                        </image>
                    </view>
                </view>
                <view class="select_goods_xinxi">
                    <view
                        class="select_goods_xinxi_item"
                        v-for="(item, index) in select_xinxi"
                        :key="index"
                    >
                        <image
                            :class="
                                index == 0
                                    ? 'select_goods_xinxi_item_img1'
                                    : index == 1
                                    ? 'select_goods_xinxi_item_img2'
                                    : index == 2
                                    ? 'select_goods_xinxi_item_img3'
                                    : index == 3
                                    ? 'select_goods_xinxi_item_img4'
                                    : 'select_goods_xinxi_item_img5'
                            "
                            :src="BaseUrl + item.image"
                            @click="goDetailHao(index)"
                            mode=""
                        ></image>
                        <view class="select_goods_xinxi_item_name">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="wrap-recommend">
                <view class="recommed-list">
                    <goodsList :goodsList="goodsList" />
                </view>
                <u-loadmore :status="status" />
            </view>
        </view>
        <!-- 工具 -->
        <tool
            :showTop="isShowTop"
            :cartnum="cartnum"
            :shopCart="true"
            :kefu="kefu"
            :costomer="true"
            :showItIndex="showItIndex"
        />
        <!-- tabBar -->
        <tabBar :current="1" />
    </view>
</template>

<script>
import { getShoppingCate, getPlayGoodsCate } from "@/utils/play.js";
import tabBar from "@/components/tabBar/tabBar.vue";
import tool from "@/components/tool/tool.vue";
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../../utils/req.js";
import {
    getMiaoshaList,
    getProductList,
    getShopCate,
    getShopBanner,
    getRecommendCate,
    getRecommendSecondCate,
} from "@/utils/newLive.js";
export default {
    components: {
        tabBar,
        tool,
    },
    data() {
        return {
            kefu: {},
            shoppingList: [],
            BaseUrl,
            select_xinxi: [],
            imageURL,
            total: 0, //总条数
            navigationHeight: uni.getSystemInfoSync()["statusBarHeight"],
            city: "哈尔滨市",

            nav_list: [
                {
                    title: "优选食品",
                    icon: "template/nav_1.png",
                },
                {
                    title: "种植食品",
                    icon: "template/nav_2.png",
                },
                {
                    title: "养殖食品",
                    icon: "template/nav_3.png",
                },
            ], //首页推荐一级分类--商城
            hour: "",
            min: "",
            second: "",
            totalTimeCount: 7100,
            countdownInterval: null,

            isShowTop: false,
            isShopCart: false,
            category_index: 0,
            cartnum: 0,

            goodsList: [], //商品推荐列表
            goodsMiaoshaList: [], //秒杀
            bannerList: [], //商城轮播图
            timeDownList: [], //时间
            showItIndex: 2,

            status: "loadmore",
            page: 1,
        };
    },
    onShow() {
        this.showItIndex = 2;
        console.log("show", this.showItIndex);
        this.isShopCart = !this.isShopCart;
        this.getShoppingList(); //获取商品推荐列表
        this.getMiaoshaList(); //获取秒杀
        this.getCategoryList(); //首页推荐分类
        this.getBannerList(); //商城轮播图
        this.RecommendCate(); //首页推荐一级分类---商城
        this.getShopping();
        this.getCarts();
    },
    onLoad() {
        this.getKefu();
        this.onCalculationTime();
        // this.onCreateTime();
    },
    onReachBottom() {
        if (this.status == "nomore") return;
        this.status = "loading";
        this.page = this.page + 1;
        this.getShoppingList();
    },
    /**
     * 页面滑动
     */
    onPageScroll(e) {
        let distanceTop = e.scrollTop;
        if (distanceTop > 200) {
            this.isShowTop = true;
        } else {
            this.isShowTop = false;
        }
    },
    onHide() {
        this.showItIndex = 0;
        console.log("Hide", this.showItIndex);
    },
    /**
     * 方法
     */
    methods: {
        getCarts() {
            this.$request
                .post("api/wanlshop.cart/synchro", { cart: [] })
                .then((res) => {
                    this.cartnum = res.data.length;
                    uni.setStorageSync("cartnum", this.cartnum);
                });
        },
        //点击跳转到甄选好物列页
        goDetailHao(index) {
            uni.navigateTo({
                url: `/upRelease/zhenXuan?id=${this.select_xinxi[index].id}&current=${index}`,
            });
        },
        async getKefu() {
            const res = await getRecommendSecondCate();
            this.kefu = res.data.kefu;
            let i = this.kefu.kefu_tips.split("客服电话");
            this.kefu.kefu_tips = i[0];
            this.kefu.mobile = i[1];
        },
        /* 跳甄选更多*/
        zhenxuanMore() {
            let id = this.select_xinxi[0].id;
            uni.navigateTo({
                url: `/upRelease/zhenXuan?id=${id}`,
            });
        },
        tiaoMore(id) {
            if (id == 15) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=15",
                });
            } else if (id == 14) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=14",
                });
            } else if (id == 13) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=13",
                });
            } else if (id == 12) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=12",
                });
            } else if (id == 11) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=11",
                });
            } else if (id == 10) {
                uni.navigateTo({
                    url: "/dabai/pages/delicacies/delicacies?pid=10",
                });
            }
        },
        async getShopping() {
            const res = await getShoppingCate({ type: "goods", is_home: 1 });
            this.shoppingList = res.data.data;
        },
        buyFlash() {
            uni.navigateTo({
                url: "/upRelease/flaseSale/flaseSale",
            });
        },
        tieo() {
            uni.navigateTo({
                url: "/upRelease/search/search",
            });
        },
        /**
         * 创建定时
         */
        onCreateTime() {
            this.countdownInterval = setInterval(() => {
                if (this.totalTimeCount == 0) {
                    this.totalTimeCount = 7100;
                }
                this.totalTimeCount--;

                this.onCalculationTime();
            }, 1000);
        },
        /**
         * 计算时间
         */
        onCalculationTime() {
            this.second = (this.totalTimeCount % 60).toString().padStart(2, 0);
            this.min = (Math.floor(this.totalTimeCount / 60) % 60)
                .toString()
                .padStart(2, 0);
            this.hour = (Math.floor(this.totalTimeCount / 3600) % 24)
                .toString()
                .padStart(2, 0);
        },
        /**
         *
         */
        onCategory(index) {
            this.category_index = index;
        },
        //商城轮播图
        async getBannerList() {
            const res = await getShopBanner();
            if (res.code == 1) {
                this.bannerList = res.data.data.shopAdverts;
            }
        },
        //点击轮播图跳转
        bannerTab(url) {
            uni.navigateTo({
                url: url,
            });
        },
        //首页推荐一级分类--商城
        async RecommendCate() {
            const res = await getPlayGoodsCate();
            if (res.code == 1) {
                this.nav_list = res.data;
            }
        },
        //商城推荐分类
        async getShoppingList() {
            const res = await getProductList({page: this.page});
            if(res.data.data.length < 15) {
                this.status = "nomore";
            } else {
                this.status = "loadmore";
            }
            this.goodsList.push(...res.data.data);
        },
        //获取商城甄选好物
        async getCategoryList() {
            const res = await getShopCate();
            if (res.code == 1) {
                this.select_xinxi = res.data;
            }
        },
        //获取商城秒杀接口
        async getMiaoshaList() {
            const res = await getMiaoshaList({
                type: "seckill",
                hour: new Date().getHours(),
            });
            if (res.code == 1) {
                this.goodsMiaoshaList = res.data.data;
                this.total = res.data.total;
                const item = this.goodsMiaoshaList[0];

                let downTime = setInterval(() => {
                    this.timeDown(item.endtime);
                }, 1000);
                this.timeDown(item.endTime);
            }
        },

        /**
         * 获取时间
         */
        timeDown(endTime) {
            //获取当前时间时间戳
            const currentTime = Math.floor(new Date().getTime() / 1000);
            //差值
            const totalTime = endTime - currentTime;
            if (totalTime <= 0) {
                //当前活动结束了
            } else {
                const hour = (Math.floor(totalTime / 3600) % 24)
                    .toString()
                    .padStart(2, 0);
                const min = (Math.floor(totalTime / 60) % 60)
                    .toString()
                    .padStart(2, 0);
                const second = (totalTime % 60).toString().padStart(2, 0);
                this.hour = hour;
                this.min = min;
                this.second = second;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0 25rpx;
    box-sizing: border-box;

    .wrap-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .shopping_search {
        padding-left: 18rpx;
        margin-top: 10rpx;
        width: 700rpx;
        height: 62rpx;
        background-color: white;
        border-radius: 50rpx;
        overflow: hidden;

        .search_input {
            margin-left: 20rpx;
            flex: 1;
            color: $place-color;
        }

        .search_btn {
            width: 115rpx;
            height: 54rpx;
            line-height: 54rpx;
            text-align: center;
            color: white;
            background: linear-gradient(90deg, #00a67a, #057748);
            margin-right: 5rpx;
            border-radius: 27rpx;
            overflow: hidden;
        }
    }

    .shopping_banner {
        margin-top: 20rpx;
        width: 700rpx;
        height: 330rpx;
        border-radius: 20rpx;
        overflow: hidden;

        .shopping_banner_img {
            width: 700rpx;
            height: 330rpx;
        }
    }

    .shopping_banner2 {
        width: 700rpx;
        height: 340rpx;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
    }
    .activity-title {
        width: 700rpx;
        height: 80rpx;
        margin-top: 20rpx;
        border-radius: 20rpx 20rpx 0 0;
        // border: 1px solid black;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 10rpx 25rpx 0rpx 25rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .title {
            // width: 100rpx;
            font-weight: normal;
            color: #fff;
            margin-left: 8rpx;
        }

        .ms_title {
            width: 180rpx;
            height: 40rpx;
            background-size: 100% 100%;
        }
        .ms_xinxi {
            // width: 300rpx;/
            align-items: center;
            display: flex;
            .activity-time {
                // margin-left: 15rpx;
                // margin-right: 15rpx;
                overflow: hidden;

                > view {
                    height: 35rpx;
                    line-height: 35rpx;
                    text-align: center;
                    overflow: hidden;
                }

                .time {
                    width: 32rpx;
                    border-radius: 8rpx;
                    background: #fff;
                    color: #f98a2d;
                }

                .colon {
                    width: 18rpx;
                    color: #fff;
                }
            }
        }
    }
    .shopping_nav {
        margin-top: 25rpx;
        height: 100rpx;
        width: 700rpx;
        overflow: hidden;

        .foods_scroll_all {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            overflow: hidden;
            white-space: nowrap;

            .shopping_nav_item {
                height: 100rpx;
                line-height: 100rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: white;
                border-radius: 16rpx;
                min-width: 214rpx;

                .shopping_nav_item_name {
                    // margin-top: 15rpx;
                    color: #000;
                }

                .shopping_nav_item_img {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }
            }
        }
    }

    .flash_sale {
        padding-top: 15rpx;
        width: 700rpx;
        overflow: hidden;
        background-color: white;

        .activity-item {
            width: 700rpx;
            height: 400rpx;
            border-radius: 0 0 16rpx 16rpx;
            overflow: hidden;
            background-color: white;

            .goods-item {
                margin-top: 10rpx;
                width: 700rpx;
                padding: 0rpx 30rpx 30rpx;
                box-sizing: border-box;
                height: 230rpx;
                white-space: nowrap;
                display: flex;

                .goods-img {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 16rpx;
                    margin-right: 20rpx;
                }

                .goods_title {
                    width: 425rpx !important;
                    line-height: 1.5;
                    font-size: 36rpx;
                    font-weight: bold;
                }

                .goods-price {
                    margin-top: 10rpx;
                    width: 425rpx;
                    height: 50rpx;

                    .jiage {
                        color: #f98a2d;
                    }
                }

                .buy {
                    width: 425rpx;
                    height: 80rpx;
                    display: flex;
                    justify-content: space-between;

                    .guang {
                        width: 200rpx;
                        height: 80rpx;
                        line-height: 80rpx;
                        font-size: 24rpx;
                    }

                    .btn {
                        width: 200rpx;
                        height: 60rpx;
                        line-height: 60rpx;
                        background-color: #f98a2d;
                        color: #fff;
                        border-radius: 25px;
                    }
                }
            }

            .admin {
                width: 700rpx;
                padding: 0 15rpx;
                height: 80rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 2rpx solid #f5f5f5;

                .admin_xinxi {
                    width: 600rpx;
                    display: flex;
                    align-items: center;

                    .admin_img {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        margin: 0 5rpx;
                    }
                }
            }
        }
    }

    .select_goods {
        margin-top: 20rpx;
        width: 700rpx;
        height: 500rpx;
        background-color: #fff;

        .select_goods_title {
            width: 700rpx;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .select_goods_title_tit {
                font-size: 36rpx;
                font-weight: bold;
                width: 580rpx;
                margin: 0 10rpx;
            }

            .select_goods_title_more {
                width: 110rpx;
                line-height: 80rpx;
                display: flex;
                align-items: center;

                .select_goods_title_text {
                    margin-right: 10rpx;
                }
            }
        }

        .select_goods_xinxi {
            background-color: #fff;
            width: 700rpx;
            height: 450rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .select_goods_xinxi_item {
                position: relative;

                .select_goods_xinxi_item_name {
                    position: absolute;
                    left: 25rpx;
                    bottom: 25rpx;
                    color: #fff;
                }

                .select_goods_xinxi_item_img1 {
                    width: 500rpx;
                    height: 270rpx;
                    border-radius: 16rpx;
                }

                .select_goods_xinxi_item_img2 {
                    width: 190rpx;
                    height: 270rpx;
                    border-radius: 16rpx;
                }

                .select_goods_xinxi_item_img3 {
                    width: 230rpx;
                    height: 160rpx;
                    border-radius: 16rpx;
                }

                .select_goods_xinxi_item_img4 {
                    width: 230rpx;
                    height: 160rpx;
                    border-radius: 16rpx;
                }

                .select_goods_xinxi_item_img5 {
                    width: 230rpx;
                    height: 160rpx;
                    border-radius: 16rpx;
                }
            }
        }
    }

    .wrap-recommend {
        margin-top: 30rpx;
        width: 100%;
        overflow: hidden;

        .recommed-list {
            margin-top: 20rpx;
            width: 100%;
            overflow: hidden;
        }
    }
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
